<template>
  <div class="midArea h">
    <!-- 好友列表 -->
    <div v-if="isChackSearch == false" class="h">
      <!-- search Bar -->
      <div class="header flex vcenter evenly">
        <el-input v-model="searchData" placeholder="搜索" @change='searchFriend()'>
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <div class="chackBtn flex lcenter vcenter pointer" @click="chackSearch"><i class="el-icon-zoom-in"></i></div>
      </div>
      <!-- Friend List -->
      <div class="midList w border">
        <div v-if="searchData == ''" class="userBox w flex vcenter lcenter TranslucentBorder">
          <el-button style="width:90%;" icon="el-icon-user">通讯录管理</el-button>
        </div>
        
        <div  
          v-if="searchData == ''"
          @click="showApplyFriendListArea" 
          class="userBox w flex vcenter TranslucentBorder"
        > 
          <el-avatar shape="square" size="large" icon="el-icon-user-solid" class="m5" style="background:rgb(250, 157, 59)" ></el-avatar>
          <div class="m5">新的朋友</div>
        </div>

        <div 
          v-for="(item, index) in returnSearchData" :key="index" 
          class="userBox w flex vcenter TranslucentBorder"
          @click="showUserInfoRight(item)"
        >
          <el-avatar shape="square" size="large" icon="el-icon-user-solid" class="m5" ></el-avatar>
          <div class="m5">{{item.remarksName}}</div>
        </div>
      </div>
    </div>
    <!-- 搜索用户列表 -->
    <div v-else class="h">
      <div class="header flex vcenter evenly">
        <el-input v-model="searchData" placeholder="搜索" >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <div class="flex lcenter vcenter pointer" style="font-size:12px;" @click="chackSearch">取消</div>
      </div>

      <div class="midList w border">
        <div 
          v-if="searchData != ''" 
          @click="searchUser()"
          class="userBox w flex vcenter TranslucentBorder hoverShow"  
        >
          <el-avatar shape="square" size="large" icon="el-icon-zoom-in" class="m5" style="background-color:rgb(7, 193, 96);"></el-avatar>
          <div style="width: 152px;overflow: hidden; text-overflow: ellipsis;white-space: nowrap;">{{'搜索:' + searchData}}</div>
          <i class="m5 el-icon-arrow-right"></i>
        </div> 

        <div class="userInfoCard">
          <el-card v-for="(item, index) in returnSearchData" :key="index">
            <div class="w flex vcenter TranslucentBorder" >
              <el-avatar shape="square" icon="el-icon-user-solid" class="m10 mid" ></el-avatar>
              <div class="m10">{{item.username}}</div>
            </div>
            <div class="w flex lcenter vcenter" style="height: 50px;">
              <el-button v-if="item.isFriend" @click="toChat(index)" type="success" size="mini">发送消息</el-button>
              <el-button v-else-if="!item.isFriend" @click="sendFriendRequest" type="success" size="mini">添加好友</el-button>
            </div>
          </el-card>
        </div>

       
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isChackSearch: false,
      searchData: '',
      returnSearchData: [],
    }
  },
  mounted() {
    this.$store.commit('setChackRightArea', 'friendInfoArea')
    this.searchFriend()
  },
  methods: {
    searchUser(){
      this.returnSearchData = []
      this.$axios.post('http://localhost:3000/user/searchUser', { searchData: this.searchData, userData: this.$store.state.chatUserInfo })
        .then((res) => {
          // console.log(res);
          if(res.data.msg == '无用户信息') this.$message.error('无法找到该用户，请检查填写的账号是否正确')
          else{
            this.returnSearchData.push({
              isFriend: res.data.body.isFriend,
              username: res.data.body.username,
              account: res.data.body.account,
              remarksName: res.data.body.remarksName,
            })
          }
        })
    },
    searchFriend(){
      this.returnSearchData = []
      this.$axios.post('http://localhost:3000/user/searchFriend', { searchData: this.searchData, userData: this.$store.state.chatUserInfo })
        .then((res) => {
          // console.log(res);
          for(let item of res.data.friendList){
            let d = new Date(item.timeToBeFriend)
            this.returnSearchData.push({
              isFriend: true,
              remarksName: item.remarksName,
              username: item.username,
              account: item.account,
              timeToBeFriend: `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()-1} ${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}`,
            })
          }
        })
    },
    showUserInfoRight(item){
      this.$store.commit('setShowUserInfoRight', item)
      this.$store.commit('setChackRightArea', 'friendInfoArea')
    },
    showApplyFriendListArea(){
      this.$store.commit('setChackRightArea', 'friendApplyArea')
    },
    chackSearch(){
      this.isChackSearch = !this.isChackSearch
      this.searchData = ''
      this.returnSearchData = []
      this.isChackSearch == false ? this.searchFriend() : ''
    },
    sendFriendRequest(){
      // console.log(this.returnSearchData[0])
      this.$axios.post('http://localhost:3000/user/sendFriendRequest', { userData: this.$store.state.chatUserInfo, searchUserData: this.returnSearchData[0] })
        .then((res) => {
          // console.log(res);
          this.$message({
              message: res.data.msg,
              type: res.data.msg == '好友申请发送成功' ? 'success' : 'warning',
            });
        })
    },
    toChat(index) {
      this.$store.commit('setChackChatUser', this.returnSearchData[index])
      this.$store.commit('setShowUserInfoRight', { username: '', account: '', isFriend: false, })
      this.$router.push("/chat")
    },
  },
}
</script>

<style>
.el-input{
  width: 80%;
}
.el-input__inner{
  height: 30px;
  line-height: 30px;
  border-radius: 4px;
  background-color: rgb(215, 215, 215, 0.8);
  font-size: 12px;
}
.el-input__icon{
  height: 30px;
  line-height: 30px;
  color: rgb(176, 176, 176);
}
.el-card__body{
  padding: 0;
}
.userInfoCard{
  position: relative;
  top: -11.5%;
  left: 100%;
  display: none;
}
.hoverShow:hover + .userInfoCard, .userInfoCard:hover{
  display: block;
}
</style>